<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简易购物车</title>
    <!-- 1.引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <style>
    table,
    tr {
      height: 30px;
    }

    table,
    th,td{
      border:1px solid #f0f0f0;
    }
  </style>

  <body>
    <div id="app">
      <table
        style="border: 1px solid #f0f0f0;border-collapse: collapse;"
        width="50%"
        height="450px"
        align="center"
        cellspacing="0"
      >
        <tr style="background-color: #f7f7f7;color: #6d787e;">
          <th width="50px"></th>
          <th>书籍名称</th>
          <th>出版日期</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item , index) in tableData" align="center">
          <td>{{index + 1}}</td>
          <td>{{item.name}}</td>
          <td align="left">{{item.publicationDate}}</td>
          <td align="left">{{ToPrice(item.price)}}</td>
          <td>
            <button @click="cutCount(item)" :disabled="item.count==1">-</button>{{item.count}}<button
              @click="addCount(item)"
            >
              +
            </button>
          </td>
          <td><button @click="deleteItem(index)">移除</button></td>
        </tr>
        <tr align="left">
          <td colspan="6">
            <p style="font-weight: bold">总价格：{{totalPrice}}</p>
          </td>
        </tr>
      </table>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        tableData: [
          {
            name: "《Java编程思想》",
            publicationDate: "2020-9",
            price: 98.0,
            count: 1,
          },
          {
            name: "《数据分析与数据原理》",
            publicationDate: "2019-2",
            price: 39.0,
            count: 1,
          },
          {
            name: "《Hadoop权威指南》",
            publicationDate: "2019-10",
            price: 59.0,
            count: 1,
          },
          {
            name: "《代码大全》",
            publicationDate: "2018-8",
            price: 128.0,
            count: 1,
          },
        ],
      },
      methods: {
        deleteItem: function (index) {
          if (confirm("您是否确认删除?")) {
            this.tableData.splice(index, 1);
          }
        },
        cutCount: function (item) {
          if (item.count - 1 > 0) item.count--;
          else {
            alert("至少为一条");
          }
        },
        addCount: function (item) {
          item.count++;
        },
        ToPrice: function (price) {
          return "¥" + price.toFixed(2);
        },
      },
      computed: {
        totalPrice() {
          let price = 0;
          for (let index = 0; index < this.tableData.length; index++) {
            const element = this.tableData[index];
            price += element.count * element.price;
          }
          return price.toFixed(2);
        },
      },
    });
  </script>
</html>
